<!--
 * @Description: 个人信息设置页面
 * @Author: 陈三愿
 * @Date: 2025-09-14 22:58:00
 * @LastEditTime: 2025-09-14 22:58:00
-->
<script setup lang="ts">
import { ref } from 'vue';

// 模拟用户数据
const user = ref({
  name: '陈三愿',
  email: 'chensanyuan@example.com',
  avatar: 'https://via.placeholder.com/150',
  bio: '前端开发工程师，热爱技术，喜欢分享。'
});

// 表单提交处理
const handleSubmit = () => {
  alert('个人信息已更新！');
};
</script>

<template>
  <div>
    <h1 class="text-2xl font-bold mb-4">个人信息设置</h1>
    
    <div class="card bg-base-100 shadow-xl">
      <div class="card-body">
        <div class="flex flex-col md:flex-row gap-6">
          <!-- 头像部分 -->
          <div class="flex flex-col items-center">
            <div class="avatar">
              <div class="w-24 rounded-full">
                <img :src="user.avatar" alt="用户头像" />
              </div>
            </div>
            <button class="btn btn-sm mt-2">更换头像</button>
          </div>
          
          <!-- 表单部分 -->
          <div class="flex-1">
            <form @submit.prevent="handleSubmit">
              <div class="form-control w-full mb-4">
                <label class="label">
                  <span class="label-text">姓名</span>
                </label>
                <input type="text" v-model="user.name" class="input input-bordered w-full" />
              </div>
              
              <div class="form-control w-full mb-4">
                <label class="label">
                  <span class="label-text">邮箱</span>
                </label>
                <input type="email" v-model="user.email" class="input input-bordered w-full" />
              </div>
              
              <div class="form-control w-full mb-4">
                <label class="label">
                  <span class="label-text">个人简介</span>
                </label>
                <textarea v-model="user.bio" class="textarea textarea-bordered h-24"></textarea>
              </div>
              
              <div class="form-control mt-6">
                <button type="submit" class="btn btn-primary">保存更改</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>